Post
Ask Question

Call Button Click Event on Press Enter Key In ASP.NET

This article will discuss how to implement a call button click event on pressing of the Enter Key. In many websites you will see that the user can press the Enter key to call the Button Click event. Here, in this application we use a TextBox to search items and we need to call a search function once the user enters the keywords in the text box and presses the "Enter" button. Here we can use JavaScript to call a server-side function in ASP.NET.

Now drag and drop one TextBox, one Button and one Label control on the form.

  1. <asp:TextBox ID="TextBox1" runat="server" Width="230px" MaxLength="50" Height="20px"></asp:TextBox>  
  2. <asp:Button ID="Button1" runat="server" Text="Submit1" OnClick="ButtonIN_Click">  
  3. </asp:Button>           
  4. <br />  
  5. <br />  
  6. <asp:Label ID="message" runat="server"></asp:Label> 

JavaScript Function

Now create a JavaScript function in the head section to call the Button Click event when the Enter key is pressed, as in the following:  

  1. <Script>    
  2.   function funfordefautenterkey1(btn, event) {    
  3.       if (document.all) {    
  4.           if (event.keyCode == 13) {    
  5.               event.returnValue = false;    
  6.               event.cancel = true;    
  7.               btn.click();    
  8.           }    
  9.      }                    
  10. </Script> 

The following is the source code for the design of our ".ASPX" page:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Refreshpage.aspx.cs" Inherits="Refreshpage" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <Script>  
  9.         function funfordefautenterkey1(btn, event) {  
  10.             if (document.all) {  
  11.                 if (event.keyCode == 13) {  
  12.                     event.returnValue = false;  
  13.                     event.cancel = true;  
  14.                     btn.click();  
  15.                 }  
  16.             }            
  17.         </Script>  
  18.   
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.     <div>  
  23.         <asp:TextBox ID="TextBox1" runat="server" Width="230px" MaxLength="50"  
  24.             Height="20px"></asp:TextBox>  
  25.         <asp:Button ID="Button1" runat="server" Text="Submit1" OnClick="ButtonIN_Click">  
  26.         </asp:Button>       
  27.         <br />  
  28.         <br />  
  29.         <asp:Label ID="message" runat="server"></asp:Label>  
  30.     </div>  
  31.     </form>  
  32. </body>  
  33. </html> 
Now call the JavaScript Function on the Server: 
  1. txt.Attributes.Add("onkeydown", "funfordefautenterkey1(" + defaultButton.ClientID + ",event)");

.cs code  

  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.UI;    
  6. using System.Web.UI.WebControls;    
  7. using System.Web.UI.HtmlControls;     
  8. public partial class Refreshpage : System.Web.UI.Page    
  9.     
  10. {    
  11.     protected void Page_Load(object sender, EventArgs e)    
  12.     {    
  13.         SetDefaultButton(TextBox1,  Button1);                          
  14.     }     
  15.     
  16.     private void SetDefaultButton(TextBox txt, Button defaultButton)    
  17.     
  18.     {           
  19.         txt.Attributes.Add("onkeydown", "funfordefautenterkey1(" + defaultButton.ClientID + ",event)");    
  20.     }    
  21.     protected void ButtonIN_Click(object sender, EventArgs e)    
  22.     
  23.     {    
  24.        message.Text = TextBox1.Text;    
  25.      }    
  26. } 

Now to see the output press F5 to execute.

Output

Call-Button-Click-Event-on-Press-Enter-Key1.jpg

Now enter the text in the "TextBox" and click on the Enter key.

Call-Button-Click-Event-on-Press-Enter-Key2.jpg

If you click on the Button Control then you will get the same output.


Similar Articles